<template>
    <div class="app-container">
        <!--编写ElementUI组件-->
      <el-row>
        <el-col :span="24">
          申请人：
          <el-select v-model="userId" clearable placeholder="请选择" style="margin-left:10px;margin-right: 40px">
            <el-option v-for="user in userList" :key="user.id" :label="user.userName" :value="user.id"></el-option>
          </el-select>
          <!--申请时间：-->
          <!--<el-date-picker v-model="applyDate" type="date" placeholder="选择日期" style="margin-left:10px;margin-right: 40px">-->
            <!---->
          <!--</el-date-picker>-->
          <el-button type="primary" icon="el-icon-search" @click="conditionSelects">搜索</el-button>
          <el-button type="primary" icon="el-icon-search" @click="returnOne">返回</el-button>
        </el-col>
      </el-row>
      <br/>

      <!--表格-->
      <el-row>
        <el-col :span="22">
          <el-table
            border
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange" :row-key="getId" >
            <el-table-column type="selection" width="55" align="center" reserve-selection></el-table-column>
            <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
            <el-table-column prop="article.articleName" label="物品名称" align="center"></el-table-column>
            <el-table-column label="申请人" width="100px" align="center">
              <template slot-scope="scope">
                <strong style="color: dodgerblue">{{scope.row.user.userName}}</strong>
              </template>
            </el-table-column>
            <el-table-column prop="applyDate" label="申请日期" width="120px" align="center"  value-format="yyyy-MM-dd" ></el-table-column>
            <el-table-column prop="applyNum" label="申请数量" width="80px" align="center"></el-table-column>
            <el-table-column prop="applyUnit" label="单位" width="80px" align="center"></el-table-column>
            <el-table-column prop="applyReason" width="160px" label="申请说明" align="center"></el-table-column>
            <el-table-column label="审核" width="150px" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleOk(scope.row.applyId)">通过</el-button>
                <el-button size="mini" type="warning" @click="handleNo(scope.row.applyId)">驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <br/>
      <el-row>
        <el-col :span="22" align="center">
          <!--current-change是组件自带事件，组件自带事件一般都存在回调参数，定义的事件处理方法可以直接接收参数值-->
          <!--建议接收后通过console.log()输出查看回调参数值-->
          <el-pagination background hide-on-single-page layout="prev, pager, next"
                         :page-size="pageSize" :current-page="currentPage" @current-change="getPage" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import  request from '@/utils/office-request'
  // 编写vue.js代码
  export default {
    data() {
      return {
        userId: undefined,  //申请人id
        userList: undefined,//申请人列表
        applyDate: undefined,//申请时间
        tableData: undefined,//表格里面的数据
        // 组件中使用的各种属性
        total:20,//分页总条数
        pageSize:3,//每页显示数量
        currentPage:1,//当前页码
        multipleSelection: [],//存储表格中所有选中项
        param:{}//条件参数



      }
    },
    // 编写各种事件方法
    methods: {


      getPage(pageNum) {
        request({
          methods: 'get',
          url:'/apply/page/'+pageNum+"/"+this.pageSize
        }).then((resp) => {
          if (resp.success) {

    this.total=resp.data.total;
    this.tableData=resp.data.list;
    this.currentPage=resp.data.pageNum;
    // this.pageSize=resp.data.pageSize;

          }
        }).catch((error) => {
          alert("执行出现了错误")
        })

      },
      //返回
      returnOne() {


        this.pageSize = 3
        this.getUserList();
        // this.getTableDate()
        this.getPage(1);
        this.userId = undefined;

      },
      //条件查询
      conditionSelects() {
        request({
          methods: 'get',
          url:'/apply/conditions',
          params:{
            userId: this.userId
          }
        }).then((resp)=>
        {

          this.total=resp.data.total;
          this.tableData=resp.data.list;
          this.currentPage=resp.data.pageNum;
          this.pageSize = resp.data.pageSize;


        }

        )
      },
      handleSelectionChange(val) {
        this.multipleSelection = val

      },
      handleOk(applyId){
        console.log(applyId);
        request({
          methods: 'get',
          url:'/apply/'+applyId+"/1"
        }).then((resp) => {
          if (resp.success) {

            this.getPage(1)

          }
        }).catch((error) => {
          alert("执行出现了错误")
        })
      },
      handleNo(applyId){
        console.log(applyId);
        request({
          methods: 'get',
          url:'/apply/'+applyId+"/-1"
        }).then((resp) => {
          if (resp.success) {

            this.getPage(1)
          }
        }).catch((error) => {
          alert("执行出现了错误")
        })
      },
  //勾选
      getId(row){
        // console.log(row);
        return row.applyId
      },
      //获取申请人列表
      getUserList() {
        request({
          methods: 'get',
          url:'/user/all'
        }).then((resp) => {
          if (resp.success) {

            this.userList = resp.data;
          }
        }).catch((error) => {
          alert("执行出现了错误")
        })

      },
      getTableDate() {
        request({
          methods: 'get',
          url:'/apply/getAll'
        }).then((resp) => {
          if (resp.success) {

            this.tableData = resp.data;
          }
        }).catch((error) => {
          alert("执行出现了错误")
        })
      }
    },
    // 编写页面加载前执行的代码
    created() {
      //获取申请人列表
      this.getUserList();
     // this.getTableDate()
      this.getPage(1);
    }
  }
</script>

<style scoped>
    .app-container {
        position: relative;
        width: 100%;
        height: calc(100vh - 84px);
    }
</style>
